<script setup>

import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const defaultActive = ref('1')
const routeMap = {
  '/dashboard/operational/data': '1',
  '/dashboard/service/monitoring': '2',
  '/dashboard/cache/monitoring':'3'
}
watchEffect(() => {
  const matchedIndex = routeMap[route.path]
  if (matchedIndex) {
    defaultActive.value = matchedIndex
  }
})


</script>

<template>
  <el-container class="dashboard">
    <el-aside width="100px">
      <el-menu :default-active="defaultActive" :router="true">
        <el-menu-item index="1" route="/dashboard/operational/data">运营数据</el-menu-item>
        <el-menu-item index="2" route="/dashboard/service/monitoring">服务监控</el-menu-item>
        <el-menu-item index="3" route="/dashboard/cache/monitoring">缓存监控</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.el-menu {
  border: none;
}
.dashboard {
  .el-aside {
    height: 100%;
    background-color: #ffffff;
  }

  .el-main {
    background-color: #f0f2f5;
    width: 100%;
  }
}
.el-menu {
  .el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #333333;
    &:hover {
      color: #1890ff;
    }
  }

  .el-menu-item.is-active {
    background-color: #f5f5f5;
    color: #1890ff;
  }
}
</style>
